<template>
	<view>
		<view class="headcontent">
			<view class="contentbox" :style="'height:'+headHeight+'rpx;'">
				<!-- <image src="../../../static/images/cc/left.png" mode="widthFix" @click="goBack"></image> -->
			</view>
		</view>
		<view class="banner">
			<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="1000"
				indicator-active-color="#84BD00" indicator-color="rgba(66, 137, 243, 0.2)" @change="banner">
				<swiper-item v-for="(item,index) in 2">
					<view class="swiper-item">
						<image
							src="https://qcloud.dpfile.com/pc/UR3o4Rr6AE7MnIxWiwyTExNGm0jeRZnoxf9PPj20DO0opzl7UKxf251v2HlD_Lu0.jpg"
							mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="shadow"></view>
			<view class="dropBox">
				<view :class="current==index?'drop select':'drop'" v-for="(item,index) in 2"></view>
			</view>
		</view>
		<view class="difficult">
			<image src="https://pic1.imgdb.cn/item/6780cb8ed0e0a243d4f2fd9d.png" mode="widthFix"></image>
			<view class="up">
				<view class="numname">月销 200+ 23收藏</view>
				<view class="upTitle">优惠价格</view>
				<view class="upDetail">
					<view class="upMoney"><text>￥</text>127</view>
					<view class="upName">宠粉双人餐(不含蘸料)</view>
				</view>
				<view class="upThree">
					<view class="upBox">
						<view class="upLname">限制</view>
						<view class="upCon">商品每桌限用1张券</view>
					</view>
					<view class="upBox">
						<view class="upLname">须知</view>
						<view class="upCon">周一至周日可用</view>
						<view class="wlIcon-fanhui2 next-icon"></view>
					</view>
					<view class="upBox">
						<view class="upLname">保障</view>
						<view class="upCon">随时退·过期自动退</view>
						<view class="wlIcon-fanhui2 next-icon"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">服务详情</view>
		</view>
		<view class="boxCon">
			<!-- <rich-text :nodes="content"></rich-text> -->
			<image src="https://pic1.imgdb.cn/item/6780cb99d0e0a243d4f2fda8.png" mode="widthFix"></image>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">购买须知</view>
		</view>
		<view class="boxCon">
			<!-- <rich-text :nodes="content"></rich-text> -->
			<image src="https://pic1.imgdb.cn/item/6780cb91d0e0a243d4f2fda0.png" mode="widthFix"></image>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">适用商户</view>
		</view>
		<view class="shopDetails">
			<view class="headShop">
				<view class="lCon">
					<image
						src="https://img2.baidu.com/it/u=3029837478,1144772205&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1736528400&t=4d606312c6675d6d14d35ec1f7c50e18"
						mode="widthFix"></image>
					<view class="shopMore">
						<view class="shopName">開莊火锅</view>
						<view class="shopStar">
							<view class="wlIcon-shoucangxuanzhong select-star-icon" v-for="(item,index) in 4"></view>
							<view class="wlIcon-shoucangxuanzhong star-icon" v-for="(item,index) in 1"></view>
							<view class="anum">4.7</view>
							<view class="amoney">￥38/人</view>
						</view>
						<view class="time">营业中 10:00-23:00</view>
					</view>
				</view>
				<view class="call">
					<view class="call-icon">
						<view class="wlIcon-dianhua"></view>
					</view>
					<view class="call-name">联系商家</view>
				</view>
			</view>
			<view class="titleNames">本店团购</view>
			<view class="list" v-for="(item,index) in 5">
				<image
					src="https://qcloud.dpfile.com/pc/UR3o4Rr6AE7MnIxWiwyTExNGm0jeRZnoxf9PPj20DO0opzl7UKxf251v2HlD_Lu0.jpg"
					mode="aspectFill"></image>
				<view class="goods">
					<view class="goodsName">宠粉双人餐(不包含蘸料)</view>
					<view class="goodsLave">可免费配送 | 支持自取</view>
					<view class="evaluate">
						<view class="wlIcon-dianzan"></view>
						<view>100%好评</view>
					</view>
					<view class="money">
						<view class="price"><text>￥</text>191</view>
						<view class="original">￥318</view>
					</view>
					<view class="buy">抢购</view>
				</view>
			</view>
		</view>
		<view class="null"></view>
		<view class="bottomBox">
			<view class="nar">
				<view class="three">
					<view class="wlIcon-dianpu1 icons"></view>
					<view class="nameview">门店</view>
				</view>
				<view class="three">
					<view class="wlIcon-gouwuche icons"></view>
					<view class="nameview">购物车</view>
				</view>
				<view class="three" @click="collectSelect">
					<view :class="collect?'wlIcon-shoucangxuanzhong selecticons':'wlIcon-shoucang icons'"></view>
					<view class="nameview">{{collect?'已收藏':'收藏'}}</view>
				</view>

			</view>
			<view class="operate">
				<view class="add">加入购物车</view>
				<view class="buy">立即订购</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0,
				content: "富文本",
				current: 0,
				collect: false
			};
		},
		created() {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
		},
		methods: {
			banner(e) {
				this.current = e.detail.current
			},
			collectSelect() {
				this.collect = !this.collect
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.headcontent {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		z-index: 6666;

		.contentbox {
			width: 750rpx;
			display: flex;
			position: relative;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
				position: relative;
				z-index: 999;
			}
		}
	}

	.banner {
		width: 750rpx;
		height: 498rpx;
		position: relative;

		.shadow {
			width: 750rpx;
			height: 498rpx;
			position: absolute;
			top: 0;
			z-index: 1;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
		}

		swiper {
			width: 750rpx;
			height: 498rpx;
			position: relative;



			.swiper-item {
				width: 750rpx;
				height: 498rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.dropBox {
			width: 700rpx;
			margin-left: 34rpx;
			display: flex;
			position: absolute;
			bottom: 60rpx;

			.drop {
				width: 46rpx;
				height: 7rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50rpx;
				margin-right: 8rpx;
			}

			.select {
				background-color: #fff;
			}
		}
	}

	.difficult {
		width: 750rpx;
		margin-top: -45rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 750rpx;
			position: absolute;
		}

		.up {
			position: relative;
			// width: 500rpx;

			.numname {
				width: 704rpx;
				margin-right: 46rpx;
				margin-top: 14rpx;
				text-align: right;
				color: #fff;
				font-size: 26rpx;
			}

			.upTitle {
				color: #FB4E2F;
				font-size: 26rpx;
				margin-left: 63rpx;
			}

			.upDetail {
				width: 650rpx;
				margin-left: 50rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px dashed #D8D8D8;

				.upMoney {
					color: #FB4E2F;
					font-size: 60rpx;

					text {
						font-size: 36rpx;
					}
				}

				.upName {
					font-size: 36rpx;
					color: #3D3D3D;
					margin-left: 68rpx;
				}
			}

			.upThree {
				width: 630rpx;
				margin-left: 60rpx;
				height: 233rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: center;

				.upBox {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 10rpx 0;

					.upLname {
						font-size: 26rpx;
						color: #666666;
					}

					.upCon {
						margin-left: 37rpx;
						font-size: 26rpx;
						color: #999999;
					}

					.next-icon {
						margin-top: 2rpx;
						margin-left: 10rpx;
						font-size: 24rpx;
					}

					image {
						width: 12rpx;
						height: 12rpx;
						position: relative;
						margin-top: 2rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.title {
		width: 664rpx;
		margin-left: 43rpx;
		display: flex;
		align-items: center;
		height: 110rpx;

		.line {
			width: 8rpx;
			height: 34rpx;
			background-color: #FB4E2F;
			border-radius: 50rpx;
		}

		.titleName {
			font-size: 33rpx;
			color: #3D3D3D;
			margin-left: 17rpx;
		}
	}

	.boxCon {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;

		image {
			width: 100%;
		}
	}

	.shopDetails {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 30rpx;

		.headShop {
			width: 638rpx;
			margin-left: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 40rpx;

			.lCon {
				display: flex;
				align-items: center;

				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 8rpx;
				}

				.shopMore {
					margin-left: 18rpx;
					width: 400rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.shopName {
						width: 100%;
						font-size: 33rpx;
						color: #3D3D3D;
					}

					.shopStar {
						width: 100%;
						display: flex;
						align-items: center;

						.select-star-icon {
							color: #84BD00;
						}

						.star-icon {
							color: #d8d8d8
						}

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 6rpx;
						}

						.anum {
							font-size: 26rpx;
							color: #FB4E2F;
							margin-left: 6rpx;
						}

						.amoney {
							font-size: 26rpx;
							color: #999999;
							margin-left: 28rpx;
						}
					}

					.time {
						width: 100%;
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.call {
				width: 104rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.call-icon {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					background-color: #eee;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				image {
					width: 52rpx;
					height: 52rpx;
				}

				.call-name {
					font-size: 26rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
		}

		.titleNames {
			margin-left: 26rpx;
			font-size: 26rpx;
			color: #3D3D3D;
			margin-top: 30rpx;
		}

		.list {
			width: 690rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			margin-top: 36rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				margin-left: 26rpx;
			}

			.goods {
				width: 416rpx;
				margin-left: 22rpx;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				position: relative;

				.goodsName {
					width: 100%;
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.goodsLave {
					width: 100%;
					font-size: 26rpx;
					color: #999999;
				}

				.evaluate {
					width: 157rpx;
					height: 39rpx;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F7F7F7;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 0 !important;
					}

					view {
						font-size: 22rpx;
						color: #666666;
						margin-left: 6rpx;
					}
				}

				.money {
					width: 100%;
					display: flex;
					align-items: flex-end;

					.price {
						color: #FB4E2F;
						font-size: 36rpx;

						text {
							font-size: 26rpx;
						}
					}

					.original {
						font-size: 26rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
						margin-bottom: 4rpx;
					}
				}

				.buy {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 136rpx;
					height: 65rpx;
					background-color: #FB4E2F;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
	}

	.bottomBox {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px 17rpx 50rpx 0px rgba(0, 0, 0, 0.13);
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;

		// 334
		.nar {
			width: 334rpx;
			display: flex;
			justify-content: space-around;

			.three {
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				image {
					width: 62rpx;
					height: 62rpx;
				}

				.icons {
					font-size: 40rpx;
				}

				.selecticons {
					font-size: 40rpx;
					color: #84BD00;
				}

				.nameview {
					width: 100rpx;
					text-align: center;
					font-size: 20rpx;
					color: #3D3D3D;
					margin-top: 6rpx;
				}
			}
		}

		.operate {
			width: 396rpx;
			height: 82rpx;
			margin-right: 20rpx;
			display: flex;

			.add {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				background: linear-gradient(270deg, #FBBE2F 0%, #FBE02F 100%);
				border-radius: 50rpx 0px 0px 50rpx;
				color: #fff;
			}

			.buy {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				background: linear-gradient(270deg, #FB4E2F 0%, #FBA92F 74%);
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				color: #fff;
			}
		}
	}

	.null {
		width: 750rpx;
		height: 160rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>